import { constantRoutes, asyncRoutes } from "@/router"

const state = {
  // 默认的静态组件
  routes: constantRoutes
}
const mutations = {
  setRoutes (state, routeList) {
    // 当调用此方法的时候，说明要往此方法中添加动态组件了
    // 这种写法的错误之处在于，当我后面再往组件中添加路由的时候，因为routes中已经有了部分动态路由数据，就会导致动态路由重复
    // 有一种情况  张三 登录 获取了动态路由 追加到路由上  李四登录 4个动态路由
    // state.routers = [...state,...routeList]
    // 这样写就会每次默认只添加静态路由和登录角色的动态路由
    state.routes = [...constantRoutes, ...routeList]
    console.log(state.routes);
  }
}
const actions = {
  filterRoutes (context, menus) {
    const routes = []
    menus.forEach(item => {
      routes.push(...asyncRoutes.filter(key => key.name == item))
    });
    context.commit('setRoutes', routes)
    // 为什么返回？  以为state中的数据是给左侧菜单用的，而返回的数据是在addRoute的时候用的
    return routes
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}